import 'package:flutter/material.dart';
import 'package:aweb5/base/BaseWidget.dart';
import 'package:aweb5/util/WindowUtil.dart';

import 'package:aweb5/pages/ProductDetail.dart';

class CateTab extends BaseWidget {
  @override
  State<CateTab> createState() => CateTabState();
}

class CateTabState extends BaseWidgetState<CateTab> {
  var value;
  List<String> cates = List();
  List<String> right = List();
  List<String> title = List();
  NavigatorState navigatorState;
  int left = 0;
  @override
  void initState() {
    super.initState();
    cates.add("新鲜牛奶");
    cates.add("酸奶");
    cates.add("儿童牛奶");
    cates.add("纯牛奶");
    cates.add("面包");
    right.add("康伴漯河花花牛酸奶菌特乳酸菌饮品整箱380ml*20");
    right.add("花花牛牛花花200ml*12袋多口味果蔬 风味早餐奶");

    title.add("水果牛奶");
    title.add("花生牛奶");
  }

  @override
  Widget build(BuildContext context) {
    navigatorState = Navigator.of(context);
    print(">>cate");
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          "分类",
          style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
        elevation: 0,
      ),
      body: Column(
        children: <Widget>[
          locateAndSearch(),
          label(),
          Expanded(
              child: Container(
            width: WindowUtil.window_width,
            child: Row(
              children: <Widget>[rowLeft(), rowRight1()],
            ),
          ))
        ],
      ),
    );
  }

  Widget locateAndSearch() {
    return Container(
      margin: EdgeInsets.only(right: 10),
      color: Color(0xfffafafa),
      width: WindowUtil.window_width,
      height: 44,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          SizedBox(
            width: 10,
          ),
          Image.asset(
            "assets/location.png",
            width: 15,
            height: 17,
          ),
          Container(
            width: 120.0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Container(
                  width: 87,
                  child: Text(
                    " 桂林路牛奶定点",
                    overflow: TextOverflow.ellipsis,
                    maxLines: 1,
                    style: TextStyle(color: Color(0xffff8900), fontSize: 12),
                  ),
                ),
                Image.asset(
                  "assets/tri.png",
                  width: 8,
                  height: 5,
                )
              ],
            ),
          ),
          Expanded(
              child: Container(
            height: 30,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
                color: Color(0xffeeeeee)),
            child: TextField(
              decoration: InputDecoration(
                  hintText: "请输入商品名称",
                  hintStyle: TextStyle(
                    color: Color(0xffa1a1a1),
                    fontSize: 12,
                  ),
                  border: InputBorder.none,
                  contentPadding: EdgeInsets.only(top: 5.0),
                  prefixIcon: Container(
                    width: 1,
                    height: 1,
                    padding: const EdgeInsets.fromLTRB(15.0, 0, 15.0, 0),
                    child: Center(child: Image.asset("assets/sousuo_icon.png")),
                  )),
            ),
          ))
        ],
      ),
    );
  }

  Widget label() {
    return Container(
      height: 44,
      width: WindowUtil.window_width,
      color: Colors.white,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          DropdownButton(
            underline: Text(""),
            icon: Image.asset(
              "assets/paixu_moren.png",
              width: 6,
              height: 9,
            ),
            items: getListData(),
            hint: new Text(
              '综合',
              style: TextStyle(color: Color(0xffff8900), fontSize: 12),
            ), //当没有默认值的时候可以设置的提示
            // value: value,//下拉菜单选择完之后显示给用户的值
            onChanged: (T) {
              //下拉菜单item点击之后的回调
              setState(() {
                value = T;
              });
            },
            //  elevation: 24,//设置阴影的高度
            style: new TextStyle(
                //设置文本框里面文字的样式
                color: Colors.red),
//              isDense: false,//减少按钮的高度。默认情况下，此按钮的高度与其菜单项的高度相同。如果isDense为true，则按钮的高度减少约一半。 这个当按钮嵌入添加的容器中时，非常有用
            //设置三角标icon的大小
          ),
          DropdownButton(
            underline: Text(""),
            icon: Image.asset(
              "assets/paixu_moren.png",
              width: 6,
              height: 9,
            ),
            items: getListData(),
            hint: new Text(
              '销量',
              style: TextStyle(color: Color(0xffff8900), fontSize: 12),
            ), //当没有默认值的时候可以设置的提示
            // value: value,//下拉菜单选择完之后显示给用户的值
            onChanged: (T) {
              //下拉菜单item点击之后的回调
              setState(() {
                value = T;
              });
            },
            //  elevation: 24,//设置阴影的高度
            style: new TextStyle(
                //设置文本框里面文字的样式
                color: Colors.red),
//              isDense: false,//减少按钮的高度。默认情况下，此按钮的高度与其菜单项的高度相同。如果isDense为true，则按钮的高度减少约一半。 这个当按钮嵌入添加的容器中时，非常有用
            //设置三角标icon的大小
          ),
          DropdownButton(
            underline: Text(""),
            icon: Image.asset(
              "assets/paixu_moren.png",
              width: 6,
              height: 9,
            ),
            items: getListData(),
            hint: new Text(
              '价格',
              style: TextStyle(color: Color(0xffff8900), fontSize: 12),
            ), //当没有默认值的时候可以设置的提示
            // value: value,//下拉菜单选择完之后显示给用户的值
            onChanged: (T) {
              //下拉菜单item点击之后的回调
              setState(() {
                value = T;
              });
            },
            //  elevation: 24,//设置阴影的高度
            style: new TextStyle(
                //设置文本框里面文字的样式
                color: Colors.red),
//              isDense: false,//减少按钮的高度。默认情况下，此按钮的高度与其菜单项的高度相同。如果isDense为true，则按钮的高度减少约一半。 这个当按钮嵌入添加的容器中时，非常有用
            //设置三角标icon的大小
          )
        ],
      ),
    );
  }

  List<DropdownMenuItem> getListData() {
    List<DropdownMenuItem> items = new List();
    DropdownMenuItem dropdownMenuItem1 = new DropdownMenuItem(
      child: new Text('1'),
      value: '1',
    );
    items.add(dropdownMenuItem1);
    DropdownMenuItem dropdownMenuItem2 = new DropdownMenuItem(
      child: new Text('2'),
      value: '2',
    );
    items.add(dropdownMenuItem2);
    DropdownMenuItem dropdownMenuItem3 = new DropdownMenuItem(
      child: new Text('3'),
      value: '3',
    );
    items.add(dropdownMenuItem3);
    DropdownMenuItem dropdownMenuItem4 = new DropdownMenuItem(
      child: new Text('4'),
      value: '4',
    );
    items.add(dropdownMenuItem4);
    DropdownMenuItem dropdownMenuItem5 = new DropdownMenuItem(
      child: new Text('5'),
      value: '5',
    );
    items.add(dropdownMenuItem5);
    DropdownMenuItem dropdownMenuItem6 = new DropdownMenuItem(
      child: new Text('6'),
      value: '6',
    );
    items.add(dropdownMenuItem6);
    DropdownMenuItem dropdownMenuItem7 = new DropdownMenuItem(
      child: new Text('7'),
      value: '7',
    );
    items.add(dropdownMenuItem7);
    DropdownMenuItem dropdownMenuItem8 = new DropdownMenuItem(
      child: new Text('8'),
      value: '8',
    );
    items.add(dropdownMenuItem8);
    DropdownMenuItem dropdownMenuItem9 = new DropdownMenuItem(
      child: new Text('9'),
      value: '9',
    );
    items.add(dropdownMenuItem9);
    DropdownMenuItem dropdownMenuItem10 = new DropdownMenuItem(
      child: new Text('10'),
      value: '10',
    );
    items.add(dropdownMenuItem10);
    return items;
  }

  Widget rowLeft() {
    return Container(
      color: Colors.white,
      width: 90.0,
      child: ListView.builder(
        itemCount: cates.length,
        itemBuilder: (BuildContext ctxt, int index) {
          return getItem(ctxt, index);
        },
        // shrinkWrap: true,
      ),
    );
  }

  Widget rowRight() {
    return Container(
      child: CustomScrollView(
        slivers: <Widget>[
          SliverToBoxAdapter(
            child: Column(
              children: [Text("水果牛奶")],
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
                (context, index) => getRightItem(context, index),
                childCount: right.length),
          ),
        ],
      ),
    );
  }

  Widget rowRight1() {
    return Container(
      width: WindowUtil.window_width - 90,
//      child:
//      SectionTableView(
//        sectionCount: title.length,
//        numOfRowInSection: (section) {
//          return right.length;
//        },
//        cellAtIndexPath: (section, row) {
//          return getRightItem(null, row);
//        },
//        headerInSection: (section) {
//          return Container(
//            alignment: Alignment.centerLeft,
//            height: 33.0,
//            color: Color(0xfff8f8f8),
//            child: Text(
//              "   ${title[section]}",
//              style: TextStyle(color: Color(0xff565656), fontSize: 11),
//            ),
//          );
//        },
////           divider: Container(
////             color: Colors.green,
////             height: 1.0,
////           ),
//      ),
    );
  }

  getItem(c, int index) {
    return GestureDetector(
        onTap: () {
          click(index);
        },
        child: Container(
          width: 90,
          height: 38,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                width: 2,
                height: left == index ? 22 : 0,
                color: Color(0xffff8900),
              ),
              Center(
                child: Text(
                  "   ${cates[index]}",
                  style: TextStyle(fontSize: 12, color: getColor(index)),
                  overflow: TextOverflow.ellipsis,
                ),
              )
            ],
          ),
        ));
  }

  click(index) {
    left = index;
    setState(() {});
  }

  Color getColor(index) {
    if (index == left) {
      return Color(0xffff8900);
    } else {
      return Color(0xff5a5a5a);
    }
  }

  getRightItem(section, index) {
    return GestureDetector(
      child: Container(
        height: 100,
        color: Colors.white,
        padding: EdgeInsets.all(10),
        child: Row(
          children: <Widget>[
            Image.asset(
              "assets/bitmap1.png",
              width: 80,
              height: 80,
              fit: BoxFit.fill,
            ),
            SizedBox(
              width: 10,
            ),
            Expanded(
                child: Column(
              children: <Widget>[
                Text(
                  right[index],
                  style: TextStyle(color: Colors.black, fontSize: 14),
                  overflow: TextOverflow.ellipsis,
                  maxLines: 2,
                ),
                Expanded(child: Text("")),
                Row(
                  children: <Widget>[
                    Column(
                      children: <Widget>[
                        Text(
                          "108",
                          style: TextStyle(color: Color(0xffff0000), fontSize: 16),
                        )
                      ],
                    ),
                    Expanded(child: Text("")),
                    GestureDetector(
                      child: Container(
                        padding: EdgeInsets.all(7),
                        width: 35,
                        height: 35,
                        child: Image.asset(
                          "assets/gouwucheselect.png",
                          width: 20,
                          height: 20,
                          fit: BoxFit.fill,
                        ),
                      ),
                      onTap: () {
                        print(">>>gouwuche");
                      },
                    )
                  ],

                )
              ],

            )),

          ],
        ),
      ),
      onTap: () {
        navigatorState.push(new MaterialPageRoute(builder: (con) {
          return new ProductDetail();
        }));
        print(">>>item");
      },
    );
  }
}
